<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../css/head.css"/>
    <script src="../js/jquery-3.4.1.js"></script>
    <script src="../js/vue.min.js"></script>
    <meta charset="UTF-8">
    <title>管理内容</title>
</head>
<body>
<header class="head">
    <img src="../img/two.png" class="img">
    <a>远方的树 - 管理页</a>
    <a class="exit" href="exit">退出</a>
</header>

<div class="divone" id="app">
    <div class="divleft">
        <dl class="dl">
            <img src="../img/three.png" class="icon">
            控制面板
        </dl>
    </div>
    <div class="divringth">
        <div class="find">
            <input placeholder="输入姓名" class="input" id="input">

            <button class="button" @click="find()">查询</button>
        </div>

        <div class="bm">


            <table  class="table" >

                <thead>
                <tr>
                    <th>ID</th>
                    <th style="width: 5%">姓名</th>
                    <th style="width: 75%;">留言内容</th>
                    <th>时间</th>
                    <th style="width: 10%;">操作</th>
                </tr>
                </thead>

                <tbody>
                <tr v-for="i in ls">
                    <td>{{i.id}}</td>
                    <td>{{i.name}}</td>
                    <td class="zbc11">{{i.text}}</td>
                    <td>{{i.data}}</td>
                    <td>
                        <button class="button2" @click="del">删除</button>
                    </td>
                </tr>

                </tbody>







            </table>

        </div>
    </div>


</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:function (){
            return{
                message:"",
                ls:[]
            }
        },
        mounted(){
            const that = this;
            $.ajax({
                url:"main",
                type:"post",
                dataType:"json",
                success : function(data) {
                    that.ls = data["List"]
                }
            })
        },
        methods:{
            find(){
                const that = this;
                const text = $("#input").val();
                if(text === ''){
                    alert("您还未输入任何内容!");
                    return false;
                }else {
                    $.ajax({
                        url:"mainfind",
                        type:"post",
                        dataType:"json",
                        data:{name:text},
                        success : function(data) {
                            that.ls = data["List"];
                        }
                    })
                    // this.ls = ["暂无内容"]
                }
            },

            del(e){
                // e.target._prevClass
                const del = document.getElementsByTagName("tbody")[0];
                const id = e.target.parentElement.parentElement.children[0].innerText;
                $.ajax({
                    url:"maindel",
                    type:"post",
                    dataType:"json",
                    data:{ID:id},
                    success:function (data) {
                        if (data == true){
                            alert("删除成功");
                            del.removeChild(e.target.parentElement.parentElement);
                        }else {
                            alert("删除失败");
                        }
                    }

                })

            }


        }
    });

    // const del = document.getElementsByTagName("tbody")[0];
    // del.onclick = function (e){
    //     // console.log(e);
    //     if(e.target.className === 'button1'){
    //         alert(1)
    //
    //     }
    //
    //     if (e.target.className === 'button2'){
    //         const id = e.target.parentElement.parentElement.children[0].innerText;
    //         console.log(id);
    //         del.removeChild(e.target.parentElement.parentElement)
    //     }
    // }


</script>
</html>